<template>
  <el-main>
    <div class="top">
      <div class="total-top">
        <div class="total-left">
          <h4 class="title">
            <strong>日销售统计</strong>
          </h4>
          <ul class="content">
            <li>
              <h2>{{ todayOrderTotal }}</h2>
              <p>当月销售量 (个)</p>
            </li>
            <li>
              <h2>{{ todayTotal }}</h2>
              <p>当日销售额 (元)</p>
            </li>
            <li>
              <h2>{{ todayBillTotal }}</h2>
              <p>当日分成 (元)</p>
            </li>
          </ul>
        </div>
        <div class="total-right">
          <h4 class="title">
            <strong>月销售统计</strong>
          </h4>
          <ul class="content">
            <li>
              <h2>{{ orderTotal }}</h2>
              <p>当月销售量 (个)</p>
            </li>
            <li>
              <h2>{{ (total / 10000).toFixed(2) }}</h2>
              <p>当月销售额 (万元)</p>
            </li>
            <li>
              <h2>{{ billTotal }}</h2>
              <p>当月分成 (元)</p>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="main">
      <div class="search">
        <el-form :inline="true" :model="form" class="demo-form-inline">
          <el-form-item label="合作商：">
            <el-select v-model="form.value" placeholder="请选择" clearable>
              <el-option
                v-for="(item, index) in searchData"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择日期：">
            <el-date-picker
              v-model="form.value1"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="~"
              :clearable="false"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit" icon="el-icon-search"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="total-title">
        <span
          >笔数统计：<i>{{ changeorderTotal }} </i> <span>个</span></span
        >
        <span
          >收入统计：<i>{{ changetotal }}</i> <span>元</span></span
        >
        <span
          >分成统计：<i>{{ changebillTotal }}</i> <span>元</span></span
        >
      </div>
      <el-table :data="tableData" style="width: 100%" v-loading="loading" class="my_table">
        <el-table-column prop="date" label="订单日期" width="217">
        </el-table-column>
        <el-table-column prop="ownerName" label="合作商" width="216">
        </el-table-column>
        <el-table-column prop="ratio" label="分成比例" width="216">
        </el-table-column>
        <el-table-column prop="orderTotalMoney" label="收入" width="216">
        </el-table-column>
        <el-table-column label="笔数" prop="orderCount" width="216">
        </el-table-column>
        <el-table-column prop="totalBill" label="分成金额" width="216">
        </el-table-column>
      </el-table>
      <div class="footer" v-if="isShow">
        <div>
          <span
            >共{{ totalCount }}条数据 第{{ pageIndex }}/{{ totalPage }}页</span
          >
          <button
            class="add"
            :class="{ active: pageIndex === '1' }"
            @click="addFn"
            ref="btn"
          >
            上一页
          </button>
          <button
            class="next"
            :class="{ active: pageIndex === totalPage }"
            @click="nextFn"
          >
            下一页
          </button>
        </div>
      </div>
    </div>
  </el-main>
</template>

<script>
import {
  getPartnerCollect,
  getSearch,
  getOrderAmount,
  getTotalBill,
  getOrderCount
} from '@/api/duizhang/accounts'
// import { Message } from 'element-ui'
import moment from 'moment'
export default {
  data () {
    return {
      loading: true,
      form: {
        value: '',
        value1: []
      },
      total: '0',
      billTotal: '0',
      orderTotal: '0',
      changetotal: '0',
      changebillTotal: '0',
      changeorderTotal: '0',
      todayTotal: '0',
      todayBillTotal: '0',
      todayOrderTotal: '0',
      tableData: [],
      searchData: [],
      pageIndex: '',
      totalPage: '',
      totalCount: ''
    }
  },
  async created () {
    const start = (this.firstDay = moment(new Date())
      .startOf('month')
      .format('YYYY-MM-DD'))
    this.form.value1[0] = start
    const end = moment(new Date()).format('YYYY-MM-DD')
    this.form.value1[1] = end
    this.total = ((await getOrderAmount(start, end)) / 100).toFixed(2)
    this.billTotal = ((await getTotalBill(start, end)) / 100).toFixed(2)
    this.orderTotal = await getOrderCount(start, end)
    this.todayBillTotal = await getTotalBill(end, end)
    this.todayOrderTotal = await getOrderCount(end, end)
    this.todayTotal = await getOrderAmount(end, end)
    this.getFn(1, this.form.value, ...this.form.value1)
    const res = await getSearch()
    this.searchData = res.currentPageRecords.map((item, i) => item.name)
  },
  methods: {
    async getFn (num, partnerName, start, end) {
      this.changetotal = ((await getOrderAmount(start, end)) / 100).toFixed(2)
      this.changebillTotal = ((await getTotalBill(start, end)) / 100).toFixed(
        2
      )
      this.changeorderTotal = await getOrderCount(start, end)
      const res = await getPartnerCollect({
        pageIndex: num,
        pageSize: 10,
        partnerName,
        start,
        end
      })
      this.pageIndex = res.pageIndex
      this.totalPage = res.totalPage
      this.totalCount = res.totalCount
      res.currentPageRecords.forEach((item, i) => {
        item.index = (res.pageIndex - 1) * 10 + i + 1
        item.totalBill = '+' + (item.totalBill / 100).toFixed(2)
        item.ratio = item.ratio + '%'
        item.orderTotalMoney = '+' + (item.orderTotalMoney / 100).toFixed(2)
      })
      console.log(this.tableData)
      this.tableData = res.currentPageRecords
      this.loading = false
    },
    onSubmit () {
      console.log(this.form)
      this.form.value1 = this.form.value1.map(
        (item) => (item = moment(item).format('YYYY-MM-DD'))
      )
      this.getFn(1, this.form.value, ...this.form.value1)
    },
    addFn () {
      if (this.pageIndex === 1) {
        return
      }
      const num = Number(this.pageIndex) - 1
      this.getFn(num, this.form.value, ...this.form.value1)
    },
    nextFn () {
      if (this.totalCount === this.totalPage) {
        return
      }
      const num = Number(this.pageIndex) + 1
      this.getFn(num, this.form.value, ...this.form.value1)
    }
  },
  computed: {
    isShow () {
      return this.totalCount > 10
    }
  }
}
</script>

<style lang="less" scoped>
.top {
  // height: 500px;
  display: flex;
  .total-top {
    flex: 1;
    display: flex;
    flex-wrap: wrap;

    .total-left {
      height: 166px;
      width: 654px;
      padding: 20px;
      margin-right: 20px;
      background: #e9f3ff;
      background-image: url(),
        url("http://likede2-admin.itheima.net/img/task.66b715b7.png");
      background-repeat: no-repeat, no-repeat;
      background-position: 0 0, calc(100% - 12px) 100%;
      border-radius: 20px;

      .content {
        display: flex;
        padding-top: 22px;
        justify-content: space-around;
        li {
          width: 84px;
          h2 {
            font-size: 36px;
            color: #072074;
            text-shadow: 3px 4px 7px rgba(7, 32, 116, 0.4);
          }
          p {
            margin-top: 6px;
            font-size: 12px;
            color: #91a7dc;
          }
        }
      }
    }
    .total-right {
      width: 655px;
      height: 166px;
      border-radius: 20px;
      padding: 20px;
      background: #fbefe8
        url(http://likede2-admin.itheima.net/img/sale.606b0d8c.png) no-repeat
        calc(100% - 12px) 100%;
      .content {
        display: flex;
        padding-top: 22px;
        justify-content: space-around;
        li {
          width: 84px;
          h2 {
            font-size: 36px;
            color: #ff5757;
            text-shadow: 2px 4px 7px rgba(255, 87, 87, 0.5);
          }
          p {
            margin-top: 6px;
            font-size: 12px;
            color: #de9690;
          }
        }
      }
    }
  }
}
.el-main {
  width: calc(100vw - 160px);
  min-height: 100%;
  background-color: #f8fafd;
  .search {
    width: 100%;
    height: 62px;
    padding-top: 13px;
    margin-bottom: 15px;
    background-color: #fff;
    /deep/ .el-form {
      label,
      input {
        line-height: 36px !important;
        height: 36px !important;
      }
      button {
        margin-top: 3px;
        height: 36px !important;
        background-color: #5f84ff;
        border-color: #5f84ff;
        width: 80px;
        text-indent: -3px;
      }
    }
  }
  /deep/ .main {
    min-height: 200px;
    margin-top: 20px;
    margin-bottom: 60px;
    padding: 20px 15px 19px 17px;
    background-color: #fff;
    .total-title {
      margin-bottom: 15px;
      span {
        font-size: 14px;
        i {
          font-style: normal;
          font-size: 20px;
          color: #ff5757;
          font-weight: 500;
        }
        span {
          margin-right: 30px;
          font-size: 12px;
        }
      }
    }
    .btn-top {
      height: 36px !important;
      margin-bottom: 20px;
      button {
        height: 36px !important;
        width: 80px !important;
      }
      .el-button--primary {
        background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
        border: none;
        text-indent: -2.5px;
        &:hover {
          background: linear-gradient(135deg, #ff7d43, #db3602) !important;
        }
      }
      .el-button--default {
        background-color: #fbf4f0;
        border: none;
        color: #655b56 !important;
        text-indent: -8px;
        &:hover {
          background-color: #f3e7e1 !important;
        }
      }
    }
    .el-table {
      border: none;
      td,
      tr,
      th {
        color: #666;
        font-weight: 400;
        text-align: center;
        border: none !important;
      }
      th {
        background-color: #f3f6fb !important;
      }
    }
    .footer {
      height: 96px;
      padding: 32px;
      > div {
        display: flex;
        height: 32px;
        span {
          flex: 1;
          color: #dbdfe5;
          font-size: 16px;
        }
        button {
          width: 70px;
          height: 32px;
          margin: 0 16px;
          font-size: 13px;
          text-align: center;
          line-height: 32px;
          border: none;
          cursor: pointer;
          border-radius: 3px;
        }
        .add {
          color: #606266;
          background-color: #d5ddf8;
        }
        .next {
          color: #606266;
          background-color: #d5ddf8;
        }
        .active {
          color: #d8dde3 !important;
          cursor: not-allowed;
          background: #edf0f9;
        }
      }
    }
  }
}
</style>
